<template>
  <div>
    <el-table :data="userList" border stripe>
      <el-table-column prop="id" label="编号" width="80"></el-table-column>
      <el-table-column prop="mobile" label="手机号" width="180"></el-table-column>
      <el-table-column prop="username" label="账号" width="180"></el-table-column>
      <el-table-column prop="role_name" label="职务" width="180"></el-table-column>
      <el-table-column prop="email" label="邮箱" width="180"></el-table-column>
      <el-table-column prop="created_time" label="创建时间" width="210"></el-table-column>
      <el-table-column prop="updated_time" label="最后登录时间" width="210"></el-table-column>
      <el-table-column label="用户权限" width="180">
        <template scope="scope">
          <el-switch
            v-model="scope.row.value2"
            active-color="#ff4949"
            inactive-color="#13ce66"
            active-text="关闭"
            inactive-text="开启"
          ></el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180">
        <template scope="scope">
          <el-button class="btn" type="primary" @click="updataUser(scope.row)">编辑</el-button>
          <el-button class="btn" type="danger" @click="del(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="修改基本信息" :modal="false" :visible.sync="dialogFormVisible">
      <el-form :model="upUsers">
        <el-form-item label="email">
          <el-input v-model="upUsers.email"></el-input>
        </el-form-item>
        <el-form-item label="mobile">
          <el-input v-model="upUsers.mobile"></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="sendUpdata">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import test from "./UserMessage";
export default {
  props: {
    userList: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  data() {
    return {
      tableData: [
        {
          id: 0,
          user: "admin",
          name: "系统管理员",
          email: "admin@gmial.com",
          create: "2020-4-5 17:52:35",
          destroy: "2020-4-5 17:52:52",
          enable: "true"
        },
        {
          id: 0,
          user: "admin",
          name: "系统管理员",
          email: "admin@gmial.com",
          create: "2020-4-5 17:52:35",
          destroy: "2020-4-5 17:52:52",
          enable: "true"
        },
        {
          id: 0,
          user: "admin",
          name: "系统管理员",
          email: "admin@gmial.com",
          create: "2020-4-5 17:52:35",
          destroy: "2020-4-5 17:52:52",
          enable: "true"
        },
        {
          id: 0,
          user: "admin",
          name: "系统管理员",
          email: "admin@gmial.com",
          create: "2020-4-5 17:52:35",
          destroy: "2020-4-5 17:52:52",
          enable: "true"
        },
        {
          id: 0,
          user: "admin",
          name: "系统管理员",
          email: "admin@gmial.com",
          create: "2020-4-5 17:52:35",
          destroy: "2020-4-5 17:52:52",
          enable: "true"
        }
      ],
      upUsers: {
        username: "",
        password: "",
        email: "",
        mobile: ""
      },
      value1: false,
      value2: false,

      dialogTableVisible: false,
      dialogFormVisible: false,
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: ""
      },
      formLabelWidth: "120px"
    };
  },
  methods: {
    open() {
      const h = this.$createElement;
      this.$msgbox({
        title: "消息",
        message: h("p", null, [
          h("span", null, "内容可以是 "),
          h("i", { style: "color: teal" }, "test")
        ]),
        showCancelButton: true,
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        beforeClose: (action, instance, done) => {
          if (action === "confirm") {
            instance.confirmButtonLoading = true;
            instance.confirmButtonText = "执行中...";
            setTimeout(() => {
              done();
              setTimeout(() => {
                instance.confirmButtonLoading = false;
              }, 300);
            }, 500);
          } else {
            done();
          }
        }
      }).then(action => {
        this.$message({
          type: "info",
          message: "action: " + action
        });
      });
    },
    del(id) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$emit("delUser", id);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    updataUser(params) {
      this.upUsers = {
        email: params.email,
        mobile: params.mobile,
        id:params.id
      };
      this.dialogFormVisible = true;
    },
    sendUpdata(){
     this. dialogFormVisible = false,
     this.$emit('childSend_id',this.upUsers)
    }
  },
  components: {
    test
  }
};
</script>